import styled from "@emotion/styled";
import { Avatar } from "antd";
import { FlexContentBox } from "../../components/styled";
import useLoginModel from "../../model/useLoginModel";
import { getHoursTips } from "../../utils";

const WelcomeView = () => {
    const user = useLoginModel()
    return <FlexContentBox>
        <MyAvatar size="large">
            {user.user?.realName}
        </MyAvatar>
        <HelloWords>
            {getHoursTips()}，{user.user?.realName}，祝你开心每一天！
        </HelloWords>
    </FlexContentBox>
}

const MyAvatar = styled(Avatar)`
background-color: #36a3f7;
vertical-align: middle;
width: 58px;
height: 58px;
line-height: 58px;
font-size: 18px;
`
const HelloWords = styled.div`
color: rgba(0,0,0,.85);
font-weight: 500;
font-size: 20px;
margin-left: 10px;
`

export default WelcomeView
